import React, { Component } from 'react'

export default class index extends Component {
    static tips = <div className='tips'>
        <br />
        <br />
        <p>在lession6中，我们用到createElement方法，他的第三个children参数，可以是数组</p>
        <p>那列表渲染其实就是将列表中的数据映射成element数组</p>
        <p>使用Array.map将数组中每一项映射成jsx</p>
        <p>留意一下控制台，会有报错</p>
        <p style={{ color: 'red' }}>Warning: Each child in a list should have a unique "key" prop.</p>
        <p>这是一个警告，下个例子讲key的作用</p>
    </div>
    static official = 'https://react.docschina.org/docs/lists-and-keys.html'
    state = {
        list: [
            { name: '喜羊羊', sex: 1 },
            { name: '美羊羊', sex: 0 },
            { name: '懒羊羊', sex: 1 },
            { name: '沸羊羊', sex: 1 }
        ]
    }
    render() {
        const { list } = this.state
        return (
            <div>
                {
                    list.map(item => <div>{item.name}</div>)
                }
            </div>
        )
    }
}
